<template>
    <div class="container">
        <div class="tabCommonTitle">
            <span>曾获奖励情况</span>
            <b>注：曾获省部级（含）以上及同类别奖励的项目、全国性行业协会奖励的项目及电力创新奖的项目（如无实质性新进展）不得申报。</b>
        </div>
        <div class="section">
            <div class="addBTn">
                <a-button :disabled="is_modify=='Y'?false:true" :class="is_modify=='Y'?'':'disabled'" type="primary" @click="addawardInfo">+添加</a-button>
            </div>
            <div class="tableList">
                <!-- <a-table :columns="columns" :data-source="data" :pagination="false" align="center">
                    <span slot="operation" slot-scope="text, record">
                        <a>
                            <img style="width:18px;height:18px;margin-right:11px;" @click="handelUpdate(text, record)" src="@/assets/img/bianji.png" alt="">
                            <img style="width:18px;height:18px;margin-left:11px;" @click="handelDelete(text, record)" src="@/assets/img/shanchu1.png" alt="">
                        </a>
                    </span>
                </a-table> -->
                <a-table :pagination="false" :data-source="data">
                    <a-table-column key="chjHjxmmc" title="获奖成果" data-index="chjHjxmmc" />
                    <a-table-column key="chjSj" title="获奖时间" data-index="chjSj" />
                    <a-table-column key="chjJxmc" title="奖项名称" data-index="chjJxmc"/>
                    <a-table-column key="chjHjdj" title="奖项等级" data-index="chjHjdj" />
                    <a-table-column key="chjSjdw" title="授奖单位" data-index="chjSjdw" />
                    <a-table-column key="action" title="操作">
                        <template slot-scope="text, record">
                            <a>
                                <img style="width:18px;height:18px;margin-right:22px;" @click="preview_qtzm(text, record)" src="@/assets/img/yulan.png" alt="">
                                <img style="width:18px;height:18px;margin-right:11px;" @click="handelUpdate(text, record)" src="@/assets/img/bianji.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;" @click="handelDelete(text, record)" src="@/assets/img/shanchu1.png" alt="">
                            </a>
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>
        <a-modal
            v-drag-modal
			title="添加获奖情况"
            class="enclosure_modal"
			:visible="awardInfoFlag"
            :maskClosable="false"
            :width="500"
            @cancel="handleCancel"
		>
            <template slot="footer">
                <!-- <a-button @click="handleCancel">取消</a-button> -->
                <a-button :disabled="is_modify=='Y'?false:true" type="primary" @click="handleSubmit">保存</a-button>
            </template>
			<a-form :form="form" @submit="handleSubmit" >
				<a-form-item label="获奖成果：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-decorator="[
						'chengguo',
						{rules: [{ required: true, message: '请输入获奖成果' }]}
					]" placeholder="获奖成果" />
				</a-form-item>
				<a-form-item label="获奖时间：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-date-picker
                        @change="onAwardWinningTime"
						name="finishTime"
						style="width: 100%"
						v-decorator="[
							'finishTime',
							{rules: [{ required: true, message: '请选择获奖时间' }]}
					]" />
				</a-form-item>
                <a-form-item label="奖项名称：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-decorator="[
						'rewardname',
						{rules: [{ required: true, message: '请输入获奖名称' }]}
					]" placeholder="奖项名称" />
				</a-form-item>
                <a-form-item label="奖项等级：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-decorator="[
						'rewardlevel',
						{rules: [{ required: true, message: '请输入奖项等级' }]}
					]" placeholder="奖项等级" />
				</a-form-item>
                <a-form-item label="授奖单位：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-decorator="[
						'rewardunit',
						{rules: [{ required: true, message: '请输入授奖单位' }]}
					]" placeholder="授奖单位" />
				</a-form-item>
                <a-form-item label="文件（只允许上传pdf文件）：" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
                    <!-- 
                        :customRequest="customRequest"
                     -->
                    <a-upload
                        accept=".pdf"
                        :customRequest="customRequest"
                        :beforeUpload="beforeUpload"
                        :showUploadList="{showRemoveIcon:false}"
                        :fileList="fileList"
                        v-decorator="[
                            'file',
                                {rules: [{ required: true, message: '请上传文件' }]}
                            ]"
                            name="file"
                        >
                        <a-button class="uploadAwardInfoBtn" style="margin:0;background:#fff;color:#333;"> <a-icon type="upload" /> 上传文件 </a-button>
                    </a-upload>
				</a-form-item>
			</a-form>
		</a-modal>
        <testPdf :cxj_cxj_id="cxj_cxj_id" :file-path="filePath" :showPdf="showpdf"></testPdf>
    </div>
</template>

<script>
import {
    // 曾获奖励列表
    cxjsbChjList,
    // 曾获奖励情况保存和修改
    cxjsbChjjAdd,
    // 曾获奖励情况详情
    cxjsbGetChjj,
    // 曾获奖励情况删除
    cxjsbChjDelete
} from "@/api/shenbao.js";
import testPdf from '@/views/declarationSystem/declare/testPdf';
import { mapActions } from 'vuex'
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
    name: 'AwardInfo',
    props: ['is_modify'],
    components: {
        testPdf
    },
    data(){
        return {
            data: [],
            awardInfoFlag: false,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            time: '',
            file: '',
            detailInfo: {},
            type: null,
            fileList: [],
            filePath: "",
            cxj_cxj_id: '',
            showpdf: false
        }
    },
    mounted() {
        this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
        this.onaxios();
    },
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
        preview_qtzm(text, record) {
            this.showpdf = !this.showpdf;
            this.filePath = record.chjPath;
        },
        handleSubmit(e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                if (!err) {
                    let formData = new FormData();
                    // 成果id
                    formData.append('cxj_cxj_id', this.$route.query.cxj_cxj_id)
                    if (this.type == 1) {
                        // 获奖成果id 
                        formData.append('id', '')
                    } else {
                        formData.append('id', this.detailInfo.id)
                    }
                    // 获奖成果
                    formData.append('chjHjxmmc', values.chengguo)
                    // 获奖时间
                    formData.append('chjSj', this.time)
                    // 奖项名称
                    formData.append('chjJxmc', values.rewardname)
                    // 奖项等级
                    formData.append('chjHjdj', values.rewardlevel)
                    // 授奖单位
                    formData.append('chjSjdw', values.rewardunit)
                    // 上传文件
                    formData.append('file', this.file)
                    cxjsbChjjAdd(formData).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            this.form.resetFields();
                            if (this.type == 1){
                                this.$message.success('添加成功')
                                this.getStatus(this.$route.query.cxj_cxj_id)
                            } else {
                                this.$message.success('修改成功')
                            }
                            this.awardInfoFlag = false;
                            this.onaxios();
                        } else {
                            this.$message.error(data.message);
                        }
                    })
                }
            })
        },
        customRequest(file){
            let fileList = [...this.fileList, file.file]
            this.fileList = fileList.slice(-1);
            this.file = this.fileList[0];
            console.log('文件列表',this.fileList)
            return false;
        },
        beforeUpload(file){
            const isLt50M = file.size / 1024 / 1024 < 50;
            if (!isLt50M) {
                this.$message.error('文件大小不能超过50MB!');
            }else if (file.type!='application/pdf') { // 此处判断上传文件的格式
              this.$message.warning('请上传pdf格式的文件')
            }
        },
        handelDelete(text, record){
            const self = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    let data = {
                       cxj_cxj_id: self.$route.query.cxj_cxj_id,
                       id: record.id
                    }
                    cxjsbChjDelete(data).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.$message.success('删除成功');
                            self.onaxios();
                        } else {
                            self.$message.error(data.message)
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    self.destroyAll();
                },
            });
        },
        destroyAll() {
            this.$destroyAll();
        },
        handelUpdate(text, record){
            this.type = 2;
            this.awardInfoFlag = true;
            this.getDetailInfo(record.id)
        },
        getDetailInfo(id){
            this.fileList = [];
            cxjsbGetChjj({
                cxj_cxj_id: this.$route.query.cxj_cxj_id,
                id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.detailInfo = data.result;
                    this.form.setFieldsValue({
                        chengguo: this.detailInfo.chjHjxmmc,
                        finishTime: this.detailInfo.chjSj,
                        rewardname: this.detailInfo.chjJxmc,
                        rewardlevel: this.detailInfo.chjHjdj,
                        rewardunit: this.detailInfo.chjSjdw,
                        file: this.detailInfo.chjPath
                    })
                    let fileName = data.result.chjPath.split('/');
                    this.fileList.push({  
                        uid: data.result.id,    // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突  
                        name: fileName[2],   // 文件名  
                        status: 'done', // 状态有：uploading done error removed  
                        response: '{"status": "success"}', // 服务端响应内容  
                    })
                    // this.fileList.push({
                    //     name: this.detailInfo.chjPath
                    // })
                }
            })
        },
        // 获奖时间
        onAwardWinningTime(date, dateString) {
            this.time = dateString;
        },
        addawardInfo(){
            this.awardInfoFlag = !this.awardInfoFlag;
            this.type = 1;
            this.fileList = [];
        },
        handleCancel() {
            this.form.resetFields();
            this.awardInfoFlag = false;
        },
        onaxios(){
            cxjsbChjList({
                cxj_cxj_id: this.$route.query.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.data = data.result;
                    this.data.map((item, index) => {
                        item.key = index;
                    })
                }
            })
        }
    }
}
</script>
<style lang="less">
.uploadAwardInfoBtn {
    width: auto!important;
    height: 40px !important;
    line-height: 40px !important;
}
</style>
<style lang="less" scoped>
.section {
    padding-top: 20px;
    .addBTn {
        text-align: right;
        button {
            width: 88px;
            height: 32px;
            background: #3388EE;
            font-size: 16px;
            font-family: PingFangSCRegular;
            color: #FFFFFF;
            line-height: 22px;
        }
    }
    .tableList {
        margin-top: 21px;
        padding-right: 20px;
    }
}
</style>
